<template>
	<div style="position: relative">
		<div ref="containerRef" class="container"></div>
		<flex-box v-if="loading" justify="center" align="center" class="mask">
			<van-loading size="34px" color="#5f88ff" />
		</flex-box>
	</div>
</template>

<script>
import usePDF from '@/composition/use-pdf'
import { ref, watch } from 'vue'

export default {
	props: {
		url: String
	},

	data() {
		return {
			loading: false
		}
	},
	watch: {
		url: {
			async handler(url) {
				this.$emit('change')
				if (this.$refs.containerRef) {
					this.$refs.containerRef.innerHTML = ''
				}
				if (url) {
					let pdfDoc
					try {
						this.loading = true
						const promise = this.getDocument(url).promise
						pdfDoc = await promise
						const imageList = await this.getCanvasEles(pdfDoc)
						imageList.forEach((image) => {
							this.$refs.containerRef.appendChild(image)
						})
						this.$emit('load')
					} catch (err) {
						console.log('pdf load err', err)
						this.$emit('error', err)
					}
					this.loading = false
				}
			},
			immediate: true
		}
	},
	computed: {},
	mounted() {
		// debugger
	},
	methods: {
		getDocument(pdfUrl) {
			return PDFJS.getDocument(pdfUrl)
		},

		async getCanvasEles(pdfDoc) {
			const totalPages = pdfDoc.numPages
			const imageList = []

			// debugger
			for (let i = 1; i <= totalPages; i++) {
				await pdfDoc
					.getPage(i)
					.then(async (page) => {
						// debugger
						let scaledViewport = page.getViewport({
							scale: screen.availWidth / page.getViewport({ scale: 1.0 }).width
						}) //可通过scale来调节初始的缩放比
						// debugger
						//第5步：创建一个 canvas 元素，并设置元素的画布属性
						let canvas = document.createElement('canvas')
						let context = canvas.getContext('2d')
						canvas.setAttribute('id', 'the-canvas' + i)
						context.mozImageSmoothingEnabled = false
						context.webkitImageSmoothingEnabled = false
						context.msImageSmoothingEnabled = false
						context.imageSmoothingEnabled = false
						let dpr = window.devicePixelRatio || 1
						let bsr =
							context.webkitBackingStorePixelRatio ||
							context.mozBackingStorePixelRatio ||
							context.msBackingStorePixelRatio ||
							context.oBackingStorePixelRatio ||
							context.backingStorePixelRatio ||
							1
						let ratio = dpr / bsr

						canvas.height = scaledViewport.height * ratio
						canvas.width = scaledViewport.width * ratio

						let renderContext = {
							canvasContext: context,
							viewport: scaledViewport,
							transform: [ratio, 0, 0, ratio, 0, 0] //这里会进行放大，解决模糊问题
						}
						// debugger
						//第 6 步: 使用 page.render 将数据渲染到画布上
						try {
							await page.render(renderContext).promise
							// 第 7 步: 绘制到 image 上
							let image = document.createElement('img')
							image.src = canvas.toDataURL('image/png')
							imageList.push(image)
						} catch (e) {
							console.error(e)
						}
					})
					.catch(console.error)
			}

			return imageList
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.container ::v-deep img {
	display: block;
	width: 100%;
	height: auto;
}
.mask {
	@include abs;
}
</style>
